import React, { useState } from "react";
import "./index.less";

// 约束一下从外面传入的props
interface IProp {
  title: string;
  list: { key: string; value: string }[];
  onChange: (value: string) => void;
}

export default function SelectOption({ title, list, onChange }: IProp) {
  const [index, setIndex] = useState(0);

  const change = (idx: number, value: string) => {
    setIndex(idx);
    onChange(value);
  };
  return (
    <div className="option">
      <h4>{title}</h4>
      <ul>
        {list.map((item, idx) => (
          <li
            key={item.value}
            className={["aaa", index === idx ? "active" : ""].join(" ")}
            onClick={() => change(idx, item.value)}
          >
            {item.key}
          </li>
        ))}
      </ul>
    </div>
  );
}
